<template>
  <div class="confirm">
    <van-nav-bar
      title="确认订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 选择地址 -->
    <div class="selc-address">
      <!-- <van-contact-card type="add" @click="$router.push('/address')" /> -->
      <van-contact-card
        type="edit"
        :name="currentContact.name"
        :tel="currentContact.tel"
        @click="$router.push('/address')"
      />
    </div>
    <!-- 渲染购物车商品 -->
    <van-swipe-cell
      v-for="prod in cart"
      :key="prod.id"
    >
      <!-- 商品卡片 -->
      <van-card
        class="goods-card"
        :price="prod.price | money"
        :title="prod.title"
        :num = "prod.amount"
      >
        <template #thumb>
          <div
            class="van-image"
            style="width: 75%; height: 100%;">
            <img :src="prod.image" class="van-image__img" style="object-fit: cover;">
          </div>
        </template>
      </van-card>
    </van-swipe-cell>

    <!-- 提交订单 -->
    <van-submit-bar
      :price="totalMoney"
      button-text="提交订单"
      @submit="onSubmit"
    />

    <!-- 输入任意文本 -->
    <van-field v-model="text" label="优惠券" />
    <van-field v-model="tel" type="text" label="配送方式" />
    <van-field v-model="number1" type="text"  label="运险费" />
    <van-field v-model="number2" type="text"  label="订单备注" />
  </div>
</template>

<script>
export default {
  name: 'Confirm',
  data() {
    return {
      currentContact: {
        name: '张三',
        tel: '13000000000',
      },
      text: '满200减20',
      tel: '普通配送',
      number1: '确认收货前可赔付12元',
      number2: '选填',
    }
  },
  computed: {
    cart() {
      return this.$store.state.cart.list
    },
    totalMoney() {
      return this.$store.getters['cart/totalMoney']
    },
  },
  methods: {
    onSubmit() {
      this.$dialog.confirm({
        title: '确认付款',
        // message: ,
      })
        .then(() => {
          return this.$router.push('/fahuo')
          // return this.$toast({ // 支付成功
          //   type: 'success',
          //   message: '支付成功',
          //   icon: 'like-o',
          // })
        })
        .catch(() => {
          return this.$toast.fail('支付失败')// 支付失败
        })
    },
    onClickLeft() {
      this.$router.back()
    },
  },
}
</script>

<style lang="less" scoped>
  .selc-address{
    margin: 50px auto;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
  .van-card{
    border:1px solid #c1ab96;
    border-radius: 10px;
    margin-bottom: 15px;
    height: 120px;
    margin-left: 10px;
    margin-right: 10px;
  }
</style>
